<template>
  做一个传声筒
  <el-row>
    <el-col :span="2">reactive：</el-col>
    <el-col :span="15">
      <nf-text
        ref="refInput"
        :model="retUser"
        colName="name"
        suffix-icon="el-icon-date"
        placeholder="223"
        @clear="myclear"
        :events="events"
      >
        <template #suffix>
          22<i class="el-icon-edit el-input__icon" @click="handleIconClick"></i>
        </template>
      </nf-text>
    </el-col>
  </el-row>
  <el-button @click="set1">设置 ref 的 name</el-button> &nbsp; &nbsp; 
  <el-button @click="set2">设置 reactive 的 name</el-button><br>
  <hr>
  reactive 的 name：{{retUser.name}}<br>
  
 
</template>

<script>
  import {ref, reactive, onMounted, nextTick } from 'vue'
  import { ElRow, ElCol, ElButton, ElInput } from 'element-plus'
  import NfText from './UI/text3.vue'
  
</script>

<script setup>
  const refName = ref('基础类型的响应性')

  const retUser = reactive({
    name: '',
    address: '',
    age: 18,
    like: []
  })

  const refInput = ref(null)

  // 传递方法、事件等
  const events = {
    focus: () => {},
    myinput: (info) => {
      console.log('子控件触发了回调事件：', info)
    }
  }

  onMounted(() => {
    console.log('父组件的input', refInput.value)
    refInput.value.focus()
  })
  const set1 = () => {
    refName.value = new Date().valueOf()
  }

  const set2 = () => {
    retUser.name = new Date().valueOf()
    events.focus()
  }

  const myclear = () => {
    console.log('父组件的清空事件----------')
  }
</script>